<style lang="less">
    @import './index.less';
</style>

<template>
  <div id="uploadVideo">
      <Upload
        :action="$videoApi"
        :on-success="handleSuccess"
        :data="uploadClient"
        :show-upload-list="false"
        :on-progress ="handleprogress"
        name="files"
        style="display: inline-block;width:58px;" >
        <div class="upload" :style="formStyle">
            <video v-if="videoUrl" height="100%" width="100%" :src="$imgUrl + videoUrl"></video>
            <span v-else>+添加视频</span>
            <div v-show="loadingStatus" class="progress">
              <Progress hide-info  :percent="uploadpercent" />
            </div>
        </div>
      </Upload>
  </div> 
</template>

<script>
export default {
  name: 'uploadVideo',
  data() {
    return {
      uploadClient : {},
      uploadVisible:false,
      uploadpercent:0,
      loadingStatus: false,
    }
  },
  props: {
    videoUrl: {
      type: String,
      default: () => {}
    },
    formStyle:{
      type: String,
      default: () => {}
    }
  },  
  watch: {
    videoUrl(val){
      console.log(val)
    }
  },
  methods: {
    init() {

    },
    handleprogress(event){
      this.uploadpercent = event.percent
      this.loadingStatus = true;
    },
    handleSuccess(res,file) {
        if (res.code == 200) {
          this.$Message.success('上传成功')
          let value =  res.data
          this.loadingStatus = false
          this.uploadVisible = true
          this.$emit("handleVideo", value);
        }
    },    
  },
  mounted() {
    this.uploadClient = {
      session_id: this.Cookies.get('session')
    };
    this.init()
  },
}
</script>
<style scoped>
 
</style>
